<template>
  <div class="my_warp app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="食谱"></header-nav>
    </div>
    <!-- 顶部类型 -->
    <div class="top-type">
      <div @click="filterType(t)" :class="['each', { curType: state.curType === t }]" v-for="t in state.types">{{ t }}</div>
    </div>
    <div class="middle">
      <div class="each-book" style="margin-bottom: 10px;" v-for="book in state.tables" @click="eachBook(book)">
        <img :src="book.cover" />
        <div class="title">{{ book.title }}</div>
        <div class="title gray">{{ book.taste }}</div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<script setup name="Weight">
import { getBooks } from "@/api/http.js";
const router = useRouter();

const state = reactive({
  // 用户下面的收藏信息等
  weightInfo: {
    cur: 0,
    tar: 0,
    bmi: 1
  },
  userInfo: {},
  groupData: {},
  tables: [],
  allBook: [],
  types: ['推荐', '早餐', '午餐', '晚餐', '加餐'],
  curType: '推荐'
});

const logout = () => {
  router.push("/login");
}

const filterType = (type) => {
  // types 数组里的一个元素  用来筛选、过滤的
  console.log(type)
  // 点击多个类型中的一个  那么你就要切换当前选中。
  // current Type 
  state.curType = type;
  // 下面是一个简单的逻辑
  if (state.curType == '推荐') {
    // 先获取用户的信息
    let userInfo = JSON.parse(localStorage.getItem('appUserInfo'))
    // 再获取用户的口味
    let taste = userInfo.taste;
    // 再跟菜谱集合进行过滤
    state.tables = state.allBook.filter(v => v.taste == taste)
  } else {
    // '早餐', '午餐', '晚餐', '加餐'
    state.tables = state.allBook.filter(v => v.type == state.curType)
  }
  console.log(state.tables)
}

const eachBook = (book) => {
  console.log(book)
  router.push(`/bookInfo/${book.id}`);
}


onMounted(() => {
  getBooks().then(res => {
    console.log(res)
    state.allBook = res.data;
    filterType(state.curType)
  })
});

</script>
<style lang="less" scoped>
.app_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
  .middle {
    width: 100%;
    height: 87vh;
    display: flex;
    height: 87vh;
    overflow: hidden;
    overflow-y: scroll;
    background: #f9f1f1;
    margin-top: 12px;
    flex-wrap: wrap;
    
    .each-book {
      width: 46%;
      height: 200px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      margin-left: 2%;
      margin-right: 2%;
    }

      .title {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: -6px;
        color: #000;
        font-size: 14px;
      }

      img {
        width: 100%;
        height: 150px;
      }
    }
}
.top-type {
  font-size: 15px;
  display: flex;
  justify-content: space-around;
  height: 36px;
  margin-top: 12px;

  .each {
    width: 18%;
    height: 100%;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    color: #000;
    background: #fff;
  }

  .curType {
    color: #fff;
    background: rgb(21, 149, 21);
  }

}
.gray {
  color: gray!important;
}
</style>
